<template>
	<view class="viewBg">

		<input class="uni-input" placeholder="请输入姓名" :value="personName" @input="personNameChange" />
		<view class="lineH1"></view>
		<!-- 选择下拉框 -->
		<view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker()">
			<text class="cell-text">{{title}}</text>
			<text class="cell-detail">{{selectedLabel}}</text>
		</view>
		<view class="lineH1"></view>

		<input class="uni-input" placeholder="请输入手机号" :value="phone" @input="phoneChange" />
		<view class="lineH1"></view>

		<input class="uni-input" placeholder="重置密码" password :value="password" @input="passwordChange" />
		<view class="1"></view>

		<button type="primary" @tap="updatePerson">编辑信息</button>

		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue"
	export default {
		components: {
			mpvuePicker
		},
		data() {
			return {
				personName: '',
				phone: '',
				userId: '',
				password: '',

				title: "选择性别",
				selectedLabel: "请选择",
				pickerValueArray: [{
					label: "男",
					value: 1
				}, {
					label: "女",
					value: 2
				}],
				pickerValueDefault: [0]
			};
		},
		onLoad(e) {
			this.loginAccount = e.userId;
			this.personName = e.loginName;
			this.phone = e.mobile;
			if (e.sex == 1) {
				this.selectedLabel = '男';
			
			} else {
				this.selectedLabel = '女';
			}
			console.log('修改网格员性别'+e.sex);
		},
		methods: {
			personNameChange: function(e) {
				this.personName = e.target.value
			},
			phoneChange: function(e) {
				this.phone = e.target.value
			},
			passwordChange: function(e) {
				this.password = e.target.value
			},
			updatePerson() {
				var self = this;
				let _sex;
				if (this.personName.length == 0) {
					uni.showToast({
						title: '请输入正确的姓名',
						mask: false,
						duration: 1500
					});
					return;
				}
				if (this.phoneChange.length == 0) {
					uni.showToast({
						title: '输入正确的手机号',
						mask: false,
						duration: 1500
					});
					return;
				}
				if (this.selectedLabel === '男') {
					_sex = 1;
				} else if (this.selectedLabel === '女') {
					_sex = 2;
				} else {
					uni.showToast({
						title: '请选择性别',
						mask: false,
						duration: 1500
					});
				}

				this.$http.post('ac/xagrid/appGridUserService/updateGirdUser', {
					userId: this.loginAccount,
					name: this.personName,
					mobile: this.phone,
					sex: _sex,
					password: this.password
				}).then((res) => {
					if (res.errcode === '0') { //0成功  1失败
						uni.showToast({
							title: '修改成功',
							mask: false,
							duration: 1500
						});
						setTimeout(function(){
							self.$eventHub.$emit('fire', {name:self.personName,mobile:self.phone,sex:_sex});
							uni.navigateBack({
								
							})
						},1500)
					} else {
						uni.showToast({
							title: res.errmsg,
							mask: false,
							duration: 1500
						});
					}
				});
			},
			showPicker() { //底部弹窗
				this.$refs.mpvuePicker.show();
			},
			onConfirm(e) {
				this.selectedLabel = e.label;
			}
		}
	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;
	}

	.uni-list-cell-navigate {
		justify-content: space-between;
	}

	.lineH1 {
		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}

	.cell-detail {
		margin-right: 20upx;
	}

	button {
		margin: 30upx;
	}
</style>
